import React from "react";
import "../box/Box.css";

// 定义模板项的数据类型
interface TemplateItem {
  id: number;            // 模板项唯一标识
  name: string;          // 模板名称
  size: string;          // 模板尺寸描述
  isCustom?: boolean;    // 是否为自定义尺寸
  coverImage?: string;   // 封面图片URL
}

// 定义导航菜单项的数据类型
interface NavItem {
  id: number;            // 导航项唯一标识
  name: string;          // 导航名称
  href: string;          // 跳转链接
  hasHotIcon?: boolean;  // 是否显示热门标签
  hasVipCorner?: boolean;// 是否显示VIP角标
}

// 常规尺寸类型
interface StandardSize {
  id: number;
  name: string;
  size: string;
  width: number;
  height: number;
  unit: string;
}

// 选项卡类型
interface Tab {
  id: number;
  name: string;
  key: string;
}

// 选项卡数据
const tabs: Tab[] = [
  { id: 1, name: "电脑", key: "pc" },
  { id: 2, name: "手机", key: "mobile" },
  { id: 3, name: "打印", key: "print" },
  { id: 4, name: "证件", key: "id" },
  { id: 5, name: "视频封面", key: "video" },
];

// 常规尺寸数据（这里只写了电脑，其他可自行补充）
const standardSizes: Record<string, StandardSize[]> = {
  pc: [
    { id: 1, name: "网页-常见尺寸", size: "1366*768 像素", width: 1366, height: 768, unit: "像素" },
    { id: 2, name: "网页-大尺寸", size: "1920*1080 像素", width: 1920, height: 1080, unit: "像素" },
    { id: 3, name: "网页-中尺寸", size: "1440*900 像素", width: 1440, height: 900, unit: "像素" },
    { id: 4, name: "网页-小尺寸", size: "1024*768 像素", width: 1024, height: 768, unit: "像素" },
    { id: 5, name: "MacBook Pro", size: "2560*1600 像素", width: 2560, height: 1600, unit: "像素" },
  ],
  // 其他类型可补充
  mobile: [],
  print: [],
  id: [],
  video: [],
};

const Box: React.FC = () => {
  // 导航菜单数据
  const navItems: NavItem[] = [
    { id: 1, name: "免费模板", href: "", hasHotIcon: true },
    { id: 2, name: "开通会员", href: "", hasVipCorner: true },
    { id: 3, name: "产品服务", href: "" },
    { id: 4, name: "解决方案", href: "" },
    { id: 5, name: "API对接", href: "" },
    { id: 6, name: "资源与合作", href: "" },
  ];

  // 推荐尺寸模板数据
  const templateItems: TemplateItem[] = [
    { id: 0, name: "自定义尺寸", size: "", isCustom: true },
    { 
      id: 1, 
      name: "手机海报", 
      size: "640*1008 像素",
      coverImage: "https://lib.eqh5.com/eqx.layout/images/templates/mobile-poster.png"
    },
    { 
      id: 2, 
      name: "长图", 
      size: "800*2400 像素",
      coverImage: "https://lib.eqh5.com/eqx.layout/images/templates/long-image.png"
    },
    { 
      id: 3, 
      name: "日签", 
      size: "1125*2436 像素",
      coverImage: "https://lib.eqh5.com/eqx.layout/images/templates/daily-sign.png"
    },
    { 
      id: 4, 
      name: "翻页画册", 
      size: "600*850 像素",
      coverImage: "https://lib.eqh5.com/eqx.layout/images/templates/flip-book.png"
    },
    { 
      id: 5, 
      name: "易拉宝", 
      size: "800*2000 毫米",
      coverImage: "https://lib.eqh5.com/eqx.layout/images/templates/roll-up.png"
    },
  ];

  // 当前选中的导航项ID，默认选中第一个
  const [activeNavId, setActiveNavId] = React.useState(1);
  

  // 处理导航项点击事件
  const handleNavClick = (id: number) => {
    setActiveNavId(id);
  };

  // 弹窗相关状态
  const [showModal, setShowModal] = React.useState(false);
  const [width, setWidth] = React.useState("1366");
  const [height, setHeight] = React.useState("768");
  const [unit, setUnit] = React.useState("像素");
  const [activeTab, setActiveTab] = React.useState("pc");
  const [selectedCardId, setSelectedCardId] = React.useState<number>(1);

  // 同步宽高
  const handleSync = () => {
    setHeight(width);
  };

  // 选择常规尺寸卡片
  const handleCardSelect = (item: StandardSize) => {
    setSelectedCardId(item.id);
    setWidth(item.width.toString());
    setHeight(item.height.toString());
    setUnit(item.unit);
  };

  // 切换选项卡
  const handleTabChange = (key: string) => {
    setActiveTab(key);
    // 默认选中第一个卡片
    const first = standardSizes[key][0];
    if (first) {
      setSelectedCardId(first.id);
      setWidth(first.width.toString());
      setHeight(first.height.toString());
      setUnit(first.unit);
    }
  };

  // 打开弹窗时初始化
  const openModal = () => {
    setShowModal(true);
    setActiveTab("pc");
    setSelectedCardId(1);
    setWidth("1366");
    setHeight("768");
    setUnit("像素");
  };

  // 确定按钮
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setShowModal(false);
    // 这里可以做后续处理
  };

  return (
    <div className="box-container">
      {/* 顶部导航栏 */}
      <div className="header">
        <div className="tag-wrap clearfix">
          <div className="header-left clearfix">
            {/* 网站Logo */}
            <div className="header-logo clearfix">
              <a className="logo-link" href="">
                <img
                  className="default"
                  src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg"
                  alt="网站Logo"
                />
              </a>
            </div>
            {/* 导航菜单 */}
            <div className="header-tab">
              {navItems.map((item) => (
                <div
                  key={item.id}
                  className={`header-nav-item ${item.id === 1 ? "template" : "box"}`}
                  onClick={() => handleNavClick(item.id)}
                >
                  {/* 选中状态指示器 */}
                  <div 
                    className="select-active" 
                    style={{ display: activeNavId === item.id ? 'block' : 'none' }}
                  ></div>
                  <div className={item.id === 1 ? "temp-des" : "item-des title"}>
                    <a href={item.href}>{item.name}</a>
                    {/* 热门标签 */}
                    {item.hasHotIcon && (
                      <img
                        src="https://lib.eqh5.com/eqx.layout/images/tiphot.svg"
                        alt="热门"
                        className="tip-hot"
                      />
                    )}
                    {/* VIP角标 */}
                    {item.hasVipCorner && (
                      <img
                        className="vip-corner"
                        src="https://lib.eqh5.com/eqx.layout/images/vip_corner_2.png"
                        alt="VIP"
                      />
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 主要内容区域 */}
      <div className="home">
        <div className="home-template m56">
          {/* 推荐尺寸标题 */}
          <p className="title left-align">推荐尺寸</p>
          {/* 模板列表 */}
          <div className="show-list">
            <div className="box">
              <ul className="template">
                {templateItems.map((item) =>
                  item.isCustom ? (
                    // 自定义尺寸项
                    <li key={item.id} className="custom" onClick={openModal}>
                      <i className="icon plus"> + </i>
                      <div className="name custom-name">自定义尺寸</div>
                    </li>
                  ) : (
                    // 常规模板项
                    <li key={item.id} className="item">
                      <div className="cover">
                        {item.coverImage && (
                          <img 
                            src={item.coverImage} 
                            alt={item.name}
                            style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                          />
                        )}
                      </div>
                      <div className="name">{item.name}</div>
                      <div className="size">{item.size}</div>
                    </li>
                  )
                )}
              </ul>
            </div>
          </div>
        </div>
        {/* 弹窗 */}
        {showModal && (
          <div className="modal-overlay">
            <div className="modal-content">
              <button className="modal-close-btn" onClick={() => setShowModal(false)}>×</button>
              <div className="modal-header">
                <h2>自定义尺寸</h2>
              </div>
              {/* 自定义尺寸输入 */}
              <form className="modal-form" onSubmit={handleSubmit}>
                <div className="size-input-row">
                  <div className="input-group">
                    <label>宽</label>
                    <input type="number" value={width} onChange={e => setWidth(e.target.value)} />
                  </div>
                  <button type="button" className="sync-btn" onClick={handleSync} title="宽高同步">
                    <span className="sync-icon">&#8635;</span>
                  </button>
                  <div className="input-group">
                    <label>高</label>
                    <input type="number" value={height} onChange={e => setHeight(e.target.value)} />
                  </div>
                  <div className="input-group">
                    <label>单位</label>
                    <select value={unit} onChange={e => setUnit(e.target.value)}>
                      <option value="像素">像素</option>
                      <option value="毫米">毫米</option>
                    </select>
                  </div>
                </div>
                {/* 常规尺寸选项卡 */}
                <div className="standard-size-section">
                  <div className="category-tabs">
                    {tabs.map(tab => (
                      <div
                        key={tab.key}
                        className={`category-tab${activeTab === tab.key ? " active" : ""}`}
                        onClick={() => handleTabChange(tab.key)}
                      >
                        {tab.name}
                      </div>
                    ))}
                  </div>
                  <div className="standard-size-list">
                    {standardSizes[activeTab]?.map(item => (
                      <div
                        key={item.id}
                        className={`standard-size-card${selectedCardId === item.id ? " selected" : ""}`}
                        onClick={() => handleCardSelect(item)}
                      >
                        <div className="card-icon">
                          <img src="/pc-icon.svg" alt="icon" style={{ width: 64, height: 64 }} />
                        </div>
                        <div className="card-name">{item.name}</div>
                        <div className="card-size">{item.size}</div>
                        {selectedCardId === item.id && <div className="card-checkmark">✔</div>}
                      </div>
                    ))}
                  </div>
                </div>
                <button className="submit-btn" type="submit"><a href="/nav">确定</a></button>
              </form>
            </div>
          </div>
        )}
        {/* 可根据需要添加下方"创作场景"等内容 */}
      </div>
    </div>
  );
};

export default Box;